.singer-detail {
  background-color: #f2f2f2;

  .detail-container {
    width: 980px;
    margin: 0 auto;
    background: url('@/assets/image/song-sheet/background.png') repeat-y center 0;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .detail-content {
      display: inline-block;
      width: calc(100% - 348px);
      padding: 27px 39px 40px;
      vertical-align: top;

      .singer-info {
        position: relative;
        height: 331px;
        text-align: left;

        .singer-username {
          display: inline-block;
          height: 34px;
          max-width: 75%;
          overflow: hidden;
          font-size: 24px;
          font-weight: normal;
          line-height: 24px;
          color: #333;
          text-overflow: ellipsis;
          word-wrap: normal;
          white-space: nowrap;
          vertical-align: bottom;
        }

        .singer-english-name {
          display: inline-block;
          max-width: 23%;
          padding-left: 10px;
          overflow: hidden;
          font-size: 14px;
          font-weight: normal;
          line-height: 32px;
          color: #999;
          text-overflow: ellipsis;
          word-wrap: normal;
          white-space: nowrap;
          vertical-align: bottom;
        }

        .singer-avatar {
          width: 100%;
          height: 300px;
        }

        .artist-home {
          position: absolute;
          right: 116px;
          bottom: 18px;
          display: block;
          width: 96px;
          height: 32px;
          cursor: pointer;
          background: url('@/assets/image/music-audio/iconall.png') repeat-y center 0;
          background-position: 0 -1156px;

          &:hover {
            background-position: 0 -1196px;
          }
        }

        .artist-sub {
          position: absolute;
          right: 20px;
          bottom: 18px;
          display: block;
          width: 76px;
          height: 32px;
          cursor: pointer;
          background: url('@/assets/image/music-audio/iconall.png') repeat-y center 0;
          background-position: 0 -500px;

          &:hover {
            background-position: 0 -540px;
          }
        }

        .collected {
          background-position: 0 -735px;

          &:hover {
            background-position: 0 -781px;
          }
        }
      }

      .singer-tabs {
        width: calc(100% - 2px);
        height: 39px;
        text-align: left;
        background: url('@/assets/image/singer/singer-tab.png');
        border-right: 1px solid #ccc;
        border-width: 0 1px;
        background-position: 0 0;
        background-repeat: repeat-x;

        .first-item {
          border-left: 1px solid #ccc;
          border-width: 0 1px;
        }

        .item {
          display: inline-block;
          width: 138px;
          height: 39px;
          padding-left: 2px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          background: url('@/assets/image/singer/singer-tab.png') no-repeat 0 9999px;

          &:hover {
            background-position: -5px -45px;
          }

          .text {
            display: inline-block;
            width: 100%;
            width: 136px;
            height: 37px;
            padding: 2px 2px 0 0;
            line-height: 37px;
            text-align: center;
            cursor: pointer;
            background: url('@/assets/image/singer/singer-tab.png') no-repeat 0 9999px;
          }
        }

        .active-item {
          background-position: left -90px;

          &.first-item {
            border: none;
          }

          &:hover {
            background-position: left -90px;
          }

          .text {
            background-position: right -90px;

            &:hover {
              background-position: right -90px;
            }
          }
        }
      }
    }

    .detail-side {
      display: inline-block;
      width: 270px;
      vertical-align: top;
    }
  }
}
